<template>
  <!-- 发布弹框 -->
  <view v-if="show" class="publish-modal">
    <!-- 遮罩层 -->
    <view class="modal-mask" @tap="hide"></view>
    
    <!-- 弹框内容 -->
    <view class="modal-content">
      <!-- 弹框标题 -->
      <view class="modal-header">
        <text class="modal-title">选择发布类型</text>
        <text class="modal-close" @tap="hide">✕</text>
      </view>
      
      <!-- 发布选项 -->
      <view class="publish-options">
        <!-- 发布动态 -->
        <view class="option-item" @tap="publishMoment">
          <view class="option-icon">
            <image class="icon-image" src="/static/moment.png" mode="aspectFit"></image>
          </view>
          <text class="option-title">发布动态</text>
        </view>
        
        <!-- 发布搭子 -->
        <view class="option-item" @tap="publishBuddy">
          <view class="option-icon">
            <image class="icon-image" src="/static/buddy.png" mode="aspectFit"></image>
          </view>
          <text class="option-title">发布搭子</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 弹框显示状态
const show = ref(false)

// 显示弹框
const showModal = () => {
  // 添加一个小延迟，使动画效果更流畅
  setTimeout(() => {
    show.value = true
  }, 50)
}

// 隐藏弹框
const hide = () => {
  show.value = false
}

// 发布动态
const publishMoment = () => {
  console.log('发布动态')
  hide()
  
  // 跳转到发布动态页面，添加动画效果
  uni.navigateTo({
    url: '/pages/post/post',
    animationType: 'slide-in-bottom',
    animationDuration: 200
  })
}

// 发布搭子
const publishBuddy = () => {
  console.log('发布搭子')
  hide()
  
  // 跳转到发布搭子页面，添加动画效果
  uni.navigateTo({
    url: '/pages/buddy/publish',
    animationType: 'slide-in-bottom',
    animationDuration: 200
  })
}

// 添加键盘事件监听，按ESC键关闭弹框（仅在H5端有效）
onMounted(() => {
  if (process.env.VUE_APP_PLATFORM === 'h5') {
    const handleEsc = (e) => {
      if (e.key === 'Escape' && show.value) {
        hide()
      }
    }
    document.addEventListener('keydown', handleEsc)
    
    // 组件卸载时移除监听
    return () => {
      document.removeEventListener('keydown', handleEsc)
    }
  }
})

// 暴露方法给外部调用
defineExpose({
  showModal,
  hide
})
</script>

<style lang="scss" scoped>

/* 修改发布选项容器样式，使其变为水平布局 */
.publish-options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20rpx;
  width: 100%;
}

.publish-option {
  display: none; /* 旧类名弃用 */
}

.publish-option:first-child {
  margin-left: 0;
}

.publish-option:last-child {
  margin-right: 0;
}

.option-icon {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}

.option-text {
  display: none; 
}

.icon-image {
  width: 150rpx;
  height: 150rpx;
}

/* 发布弹框样式 */
.publish-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(88rpx + env(safe-area-inset-bottom) - 1px);
  bottom: calc(88rpx + constant(safe-area-inset-bottom) - 1px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;
  z-index: 998;
}

.modal-content {
  width: 100%;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 28rpx 28rpx 22rpx;
  padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
  animation: slideUp 0.25s ease;
  z-index: 999;
  max-height: calc(100vh - (87rpx - 1px) - 80rpx);
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
  padding: 0 40rpx;
}

.modal-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1f1f1f;
}

.modal-close {
  font-size: 36rpx;
  color: #9aa0a6;
}

/* 新的选项项样式 */
.option-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.option-title {
  font-size: 28rpx;
  color: #1f1f1f;
}

/* 修改按钮容器样式，使其内部元素平均分布 */
.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

/* 修改单个按钮样式 */
.action-button {
  flex: 1;
  margin: 0 10rpx;
  padding: 20rpx 0;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 其他样式保持不变 */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>